<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<view>
			<mescroll-body bottom="100rpx" :sticky="true" ref="mescrollRef"
			 @init="mescrollInit" @down="downCallback" @up="upCallback" height="70%">
				<view class="sticky-tabs">
					<view class="top-fix">
						<view :style="{'height':(CustomBar-StatusBar) +'px','padding-top': StatusBar +'px'}"
							class="navfix"></view>
						<view class="search-box">
							<view class="search">
								<image class="search-icon" src="@/static/home/search.png"></image>
								<input type="text" class="ipt" placeholder-class="pipt" placeholder="输入代码/名称/简拼">
								<!-- <image class="hot" src="@/static/price/hot.png"></image> -->
							</view>
							<image class="set" @click="cycleSet" src="@/static/price/set.png"></image>
						</view>
					</view>
					<view class="group-top">
						<view class="navbar-box">
							<view class="box">
								<view class="li" :class="{'active':navfixIndex==0}" @click="navfix(0)">自选</view>
								<view class="li" :class="{'active':navfixIndex==1}" @click="navfix(1)">国内</view>
							</view>
						</view>
						<view :hidden="navfixIndex!=1">
							<view class="tabbar-box">
								<scroll-view scroll-x scroll-with-animation :show-scrollbar="false"
									:scroll-left="scrollLeft" class="tabbar">
									<view class="li" :class="{'active':tabfixIndex==index}" @click="exchangeChanged(index)"
										v-for="(item,index) in exchange">{{item.text}}</view>
								</scroll-view>
								<!-- <image src="@/static/home/subpage/drop-gray.png"></image> -->
							</view>
						</view>
						<!-- <scroll-view scroll-x class="item-box">
							<view class="item" @click="priceDetail" :class="{'green-bg':index==0,'blue-bg':index==1,'orange-bg':index>=2}" v-for="(item,index) in 6">
								<view class="sup">同花顺商品</view>
								<view class="sub">
									<text>184.32</text>
									<text>-0.06%</text>
								</view>
							</view>
						</scroll-view> -->
					</view>
				</view>
				<view :hidden="navfixIndex!=0" class="optional-data">
					<view class="menu-fix">
						<view class="menu-box">
							<!-- <view class="icn-right"></view> -->
							<view class="tr">
								<view class="tl" @click="renderSettings">
									<text>编辑</text>
									<image src="@/static/price/edit.png"></image>
								</view>
								<view class="tl">
									<text>分时预览</text>
								</view>
								<view class="tl">
									<text>最新价</text>
								</view>
							</view>
						</view>
					</view>
					<view class="data-chart">
						<l-echart ref="echart$" @finished="e=> barInit(e, item)"></l-echart>
					</view>
					<view class="optional-data-content" v-if="isShowData">
						<view class="optional-data-row" v-for="(item, i) in optional" :key="i"
							@click="priceDetail(item)">
							<view class="data-left">
								<view class="data-name">
									{{item.name}}
								</view>
								<view class="data-code">
									<view class="data-table">
										主
									</view>
									<text>{{item.contractCode}}</text>
								</view>
							</view>
							<view class="data-chart">
								<!-- <l-echart :ref="item.echart" @finished="e=> barInit(e, item)"></l-echart> -->
								
							</view>
							<view class="data-right">
								<view class="data-num">
									{{item.price}}
								</view>
								<view class="data-proportion">
									{{item.ratio}}%
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view :hidden="navfixIndex!=0">
					<view class="menu-fix">
						<view class="menu-box">
							<view class="icn-right"></view>
							<view class="tr">
								<view class="tl" @click="renderSettings">
									<text>编辑</text>
									<image src="@/static/price/edit.png"></image>
								</view>
								<view class="tl">
									<text>最新</text>
									<view class="drop">
										<view class="icn-top"></view>
										<view class="icn-bottom"></view>
									</view>
								</view>
								<view class="tl">
									<text>涨幅</text>
									<view class="drop">
										<view class="icn-top"></view>
										<view class="icn-bottom icn-red"></view>
									</view>
								</view>
								<view class="tl">
									<text>涨跌</text>
									<view class="drop">
										<view class="icn-top"></view>
										<view class="icn-bottom"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<view :hidden="navfixIndex!=0" class="content">
					<view class="group-box">
						<view class="hot-title">
							<view class="left">
								<view class="title-text">热门合约</view>
							</view>
							<view class="check">
								<text>全部</text>
								<image src="@/static/home/arrow-right.png"></image>
							</view>
						</view>
						<view class="info-box">
							<view class="col" @click="priceDetail(item)"
								:class="{'red-gradientBg':!item.isRise,'green-gradientBg':item.isRise}"
								v-for="(item,index) in contract">
								<view class="sup">
									<text>{{item.name}}</text>
									<view class="exists" v-if="item.selected">
										已添加
									</view>
									<view v-else class="checkRed-box" @click.stop="switchSelect(item)">
										<image v-if="item.isSelect" class="img-full" src="@/static/price/check_red.png">
										</image>
										<view class="checkRed" v-else>
										</view>
									</view>
								</view>
								<view class="sub">
									<text>{{item.price}}</text><text>{{item.ratio}}%</text>
								</view>
							</view>
						</view>
						<view class="add-optional" @click="oneTouchAdd">一键添加自选</view>
						<view class="search-optional" @click="toSearch">
							<image class="search-icon" src="@/static/home/search.png"></image>
							<input type="text" class="ipt" placeholder-class="pipt" placeholder="搜索添加自选">
						</view>
					</view>
				</view>
				<view :hidden="navfixIndex!=1">
					<view class="menu-fix menu-fix1">
						<view class="menu-box">
							<view class="tr">
								<view class="tl" @click="renderSettings">
									<text>名称</text>
								</view>
								<view class="tl">
									<text>最新</text>
									<!-- <view class="drop">
										<view class="icn-top"></view>
										<view class="icn-bottom"></view>
									</view> -->
								</view>
								<view class="tl">
									<text>涨幅</text>
									<!-- <view class="drop">
										<view class="icn-top"></view>
										<view class="icn-bottom icn-red"></view>
									</view> -->
								</view>
								<view class="tl">
									<text>涨跌</text>
									<!-- <view class="drop">
										<view class="icn-top"></view>
										<view class="icn-bottom"></view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="table-box">
						<view class="tr" @click="priceDetail(item)" v-for="(item,index) in domesticDataList">
							<view class="tl">
								<view class="sup">{{item.name}}</view>
								<view class="sub">{{item.code}}</view>
							</view>
							<view class="tl" :class="{'cl-red':item.isRise}">{{item.price}}</view>
							<view class="tl" :class="{'cl-red':item.isRise}">{{item.ratio}}%</view>
							<view class="tl" :class="{'cl-red':item.isRise}">{{item.increase}}</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>

		<uni-tabbar-custom :current="1"></uni-tabbar-custom>
	</view>
</template>

<script>
	import * as echarts from '@/utils/echarts.min.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import Socket from '@/utils/ws.js'
	// import {apiGoods} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				navfixIndex: 0,
				tabfixIndex: 0,
				scrollLeft: 0,
				contract: [],
				isShowData: false,
				optional: [{
					name: '纯碱2401',
					table: '主',
					code: 'SA2401',
					echart: 'echart1',
					num: '1787',
					proportion: '+3.06%',
				}],
				domesticDataList: [],
				exchange: [{
						text: '上期所',
						exchange: 'SHFE'
					},
					{
						text: '大连商品',
						exchange: 'DCE'
					},
					{
						text: '郑州商品',
						exchange: 'CZCE'
					},
					{
						text: '广期所',
						exchange: 'GFEX'
					},
					{
						text: '中金所',
						exchange: 'CFFEX'
					},
					{
						text: '上海能源',
						exchange: 'INE'
					}
				]
			}
		},
		onLoad(e) {
			uni.hideTabBar({})
			
			
			
		},
		onShow() {
			// this.getContract()
			if (this.mescroll && this.mescroll.resetUpScroll) {
				// this.mescroll.resetUpScroll();
			}
			// let obj = {
			
			// 	isSelect: false,
			// 	echartQuoteMinuteList: [],
			// 	echart: 'echart$',
			
			// }
			// this.barInit(null, obj)
			// this.isShowData=true;
		},
		methods: {
			navfix(index) {
				this.navfixIndex = index;
				this.mescroll.triggerDownScroll()
			},
			exchangeChanged(index) {//切换交易所
				this.tabfixIndex = index;
				if (index > 1) this.scrollLeft = (index - 2) * 90;
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 200);
				//刷新行情
				
			},
			/*下拉刷新的回调 */
			// downCallback() {
			// 	this.mescroll.resetUpScroll();
			// 	// this.isShowData = false
			// 	// uni.showLoading({
			// 	// 	title: "加载中..."
			// 	// })
			// 	// this.$request({
			// 	// 	url: this.$api.contractList,
			// 	// 	method: 'get',
			// 	// 	data: {
			// 	// 		pageSize: '4',
			// 	// 		pageNum: 1,
			// 	// 	},
			// 	// 	successCb: (res) => {
			// 	// 		uni.hideLoading();
			// 	// 		// console.log('请求成功1', res)
			// 	// 		this.optional = res.data.map((item, i) => {
			// 	// 			let quoteMinuteList = item.quoteMinuteList.map(item1 => {
			// 	// 				return [item1.date, item1.price]
			// 	// 			})
			// 	// 			// console.log('echartQuoteMinuteList', quoteMinuteList)
			// 	// 			return {
			// 	// 				...item,
			// 	// 				isSelect: false,
			// 	// 				isRise: (item.ratio.indexOf('-') == -1),
			// 	// 				echartQuoteMinuteList: quoteMinuteList,
			// 	// 				echart: `echart${i}`
			// 	// 			}
			// 	// 		})
			// 	// 		this.isShowData = true
			// 	// 		this.mescroll.endSuccess(4, false); // 加载成功
			// 	// 	},
			// 	// 	failCb(e) {
			// 	// 		// uni.hideLoading();
			// 	// 		console.log(e);
			// 	// 		uni.showToast({
			// 	// 			title: e.data.msg || '服务器异常',
			// 	// 			icon: "none",
			// 	// 			duration: 2000,
			// 	// 		});
			// 	// 		this.mescroll.endErr();
			// 	// 	}
			// 	// });
			// },
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				if (this.navfixIndex === 0) {
					this.getContractList(page)
				} else if (this.navfixIndex === 1) {
					this.getDomesticDataList(page)
				}
				//联网失败, 结束加载
				// this.mescroll.endErr();
			},
			// 获取国内合约数据
			getDomesticDataList(page) {
				this.$request({
					url: this.$api.contract,
					method: 'get',
					data: {
						pageSize: page.size,
						pageNum: page.num,
						exchange: this.exchange[this.tabfixIndex].exchange
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功1', res)
						let curPageData = res.rows.map((item, i) => {
							let isRise = (item.ratio.indexOf('-') == -1)
							let ratio = item.ratio
							if (isRise) {
								ratio = '+' + ratio
							}
							let increase = Number(item.increase).toFixed(2)
							// if (isRise) {
							// 	increase = '+' + increase
							// }
							return {
								...item,
								isSelect: false,
								isRise,
								ratio,
								increase,
							}
						})

						if (page.num == 1) this.domesticDataList = []; //如果是第一页需手动制空列表
						this.domesticDataList = this.domesticDataList.concat(curPageData); //追加新数据
						this.mescroll.endSuccess(curPageData.length); // 隐藏加载状态栏
					},
					failCb(e) {
						// uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
						this.mescroll.endErr();
					}
				});
			},
			// 获取自选合约数据
			getContractList(page) {
				// console.log('page',page)
				this.isShowData = false
				this.$request({
					url: this.$api.contractList,
					method: 'get',
					data: {
						pageSize: page.size,
						pageNum: page.num,
					},
					successCb: (res) => {
						uni.hideLoading();
						console.log('请求成功1', res)
						let curPageData = res.data.map((item, i) => {
							let quoteMinuteList = item.quoteMinuteList.map(item1 => {
								return [item1.date, item1.price]
							})
							// console.log('echartQuoteMinuteList', quoteMinuteList)
							let isRise = (item.ratio.indexOf('-') == -1)
							let ratio = item.ratio
							if (isRise) {
								ratio = '+' + ratio
							}
							let increase = Number(item.increase).toFixed(2)
							// if (isRise) {
							// 	increase = '+' + increase
							// }
							let obj = {
								...item,
								isSelect: false,
								echartQuoteMinuteList: quoteMinuteList,
								echart: `echart${i}`,
								isRise,
								ratio,
								increase,
							}
							if (this.isShowData) {
								this.barInit(null, obj)
							}
							return obj
						})
						this.isShowData = true
						if (page.num == 1) this.optional = []; //如果是第一页需手动制空列表
						this.optional = this.optional.concat(curPageData); //追加新数据
						this.mescroll.endSuccess(curPageData.length); // 隐藏加载状态栏
					},
					failCb(e) {
						// uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
						this.mescroll.endErr();
					}
				});
			},
			// 获取热门合约数据
			getContract() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.contract,
					method: 'get',
					data: {
						pageSize: '4',
						pageNum: 1,
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功', res)
						this.contract = res.rows.map(item => {
							return {
								...item,
								isSelect: false,
								isRise: (item.ratio.indexOf('-') == -1)
							}
						})
					},
					failCb(e) {
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			renderSettings() {
				uni.navigateTo({
					url: '/pages/priceSubpage/renderSet/renderSet'
				});
			},
			cycleSet() {
				uni.navigateTo({
					url: '/pages/priceSubpage/cycleSet/cycleSet'
				});
			},
			priceDetail(item) {
				// console.log(item)
				let code = item.code
				// return
				uni.navigateTo({
					url: `/pages/priceSubpage/priceDetail/priceDetail?code=${code}`
				});
			},
			switchSelect(item) {
				item.isSelect = !item.isSelect
			},
			toSearch() {
				uni.navigateTo({
					url: '/pages/transaction/search/search'
				});
			},
			// 一键添加自选
			oneTouchAdd() {
				let arr = []
				this.contract.map(item => {
					if (item.isSelect) {
						arr.push(item.code)
					}
				})
				if (!arr.length) {
					return
				}
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.contractAdd,
					data: {
						codes: arr.join(','),
						groupId: '1',
						groupName: '默认',
					},
					successCb: (res) => {
						uni.hideLoading();
						console.log('请求成功', res)
						this.mescroll.resetUpScroll();
						this.getContract()
						uni.showToast({
							title: res.msg || '操作成功',
							icon: "none",
							duration: 2000,
						});
					},
					failCb(e) {
						uni.hideLoading();
						console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},

			// 初始化图表
			barInit(e, item) {
				// console.log('item.echartQuoteMinuteList', item.echartQuoteMinuteList)
				this.barOption = {
					color: ['#FF483D'],
					backgroundColor: "#ffffff",
					tooltip: {
						trigger: 'axis',
						// axisPointer: {
						// 	type: 'cross'
						// },
						position: [0, 0]
					},
					xAxis: {
						type: 'time',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false,
						},
						boundaryGap: false
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false
						},
						axisLabel: {
							show: false,
						}
					},
					grid: {
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
					},
					series: [{
						data: [
							[0, 87],
							[100, 123],
							[90, 150],
							[138, 187],
						],
						// data: item.echartQuoteMinuteList,
						type: 'line',
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#FFEFEE' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFEFEE' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							},
							'series-line': {
								itemStyle: {
									borderJoin: 'round'
								}
							}
						},
						symbol: "none",
						smooth: true
					}]
				};
				// this.$refs[item.echart][0].init(echarts, chart => {
				// 	chart.setOption(this.barOption);
				// });
				
				this.$refs['echart$'].init(echarts, chart => {
					chart.setOption(this.barOption);
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}

	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.cl-red {
		color: #FF3B30 !important;
	}

	.top-fix {
		background: linear-gradient(45deg, #FF6842 0%, #FF3B30 100%);
	}

	.navfix {
		// background: linear-gradient(45deg, #FF6842 0%, #FF3B30 100%);
		position: relative;
		z-index: 1;
	}

	.search-box {
		padding: 20rpx 20rpx 34rpx;
		// background: linear-gradient(45deg, #FF6842 0%, #FF3B30 100%);
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			padding: 0 20rpx;
			width: 624rpx;
			height: 62rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			border-radius: 32rpx;

			.search-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.ipt {
				min-width: 188rpx;
				color: rgba(0, 0, 0, 0.6);
				font-size: 24rpx;
			}

			.pipt {
				color: #8E8E93;
			}

			.hot {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.set {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.group-top {
		position: relative;
		background-color: #fff;
		z-index: 3;

		.navbar-box {
			padding: 32rpx 24rpx 24rpx;

			.box {
				display: flex;
				align-items: center;
				width: 100%;
				height: 80rpx;
				background: #F7F7F7;
				border-radius: 16rpx;
				padding: 4rpx;
				box-sizing: border-box;
			}

			.li {
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.4);
				flex: 1;
				text-align: center;
				height: 100%;
				line-height: 72rpx;
			}

			.li.active {
				background-color: #fff;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				border-radius: 16rpx;
			}
		}

		.tabbar-box {
			position: relative;
			padding-right: 70rpx;

			.tabbar {
				white-space: nowrap;
				border-bottom: 2rpx solid #F4F5F7;

				.li {
					display: inline-block;
					vertical-align: top;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.8);
					margin-left: 62rpx;
					padding: 24rpx 0;
					position: relative;
				}

				.li:first-child {
					margin-left: 24rpx;
				}

				.li.active {
					font-weight: bold;
					color: #EE5953;
				}

				.li.active::after {
					content: '';
					width: 48rpx;
					height: 8rpx;
					background: #EE5953;
					border-radius: 4rpx;
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
				}
			}

			& image {
				width: 46rpx;
				height: 46rpx;
				position: absolute;
				right: 20rpx;
				top: 22rpx;
			}
		}

		.item-box {
			padding: 24rpx 0;
			white-space: nowrap;

			.item {
				display: inline-block;
				vertical-align: top;
				padding: 16rpx;
				height: 108rpx;
				box-sizing: border-box;
				margin-left: 16rpx;
				border-radius: 12rpx;

				.sup {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);

				}

				.sub {
					font-size: 24rpx;
					font-weight: bold;
					margin-top: 8rpx;

					& text:last-child {
						font-size: 20rpx;
						padding-left: 16rpx;
					}
				}
			}

			.item:first-child {
				margin-left: 20rpx;
			}

			.item.green-bg {
				background: #F7FDF8;

				.sub {
					color: #33C45B;
				}
			}

			.item.blue-bg {
				background: rgba(53, 111, 229, 0.04);

				.sub {
					color: #356FE5;
				}
			}

			.item.orange-bg {
				background: rgba(255, 162, 0, 0.04);

				.sub {
					color: #FFA200;
				}
			}
		}
	}

	.menu-fix {
		background: #F4F5F7;
		padding-top: 16rpx;
	}

	.menu-box {
		position: relative;
		height: 88rpx;
		background: #FFFFFF;
		padding: 0 78rpx 0 32rpx;

		.icn-right {
			width: 0rpx;
			height: 0rpx;
			border: 14rpx solid transparent;
			border-left-color: #EFF4FD;
			border-left-width: 22rpx;
			position: absolute;
			right: 12rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		.tr {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;

			// border-bottom: 2rpx solid #F6F7F9;
			// padding:24rpx 0;
			.tl {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.6);

				& image {
					width: 48rpx;
					height: 48rpx;
				}

				.drop {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					margin-left: 8rpx;

					.icn-top {
						width: 0rpx;
						height: 0rpx;
						border: 8rpx solid transparent;
						border-bottom-color: #BFBFBF;
						border-bottom-width: 11rpx;
						margin-bottom: 2rpx;
					}

					.icn-bottom {
						width: 0rpx;
						height: 0rpx;
						border: 8rpx solid transparent;
						border-top-color: #BFBFBF;
						border-top-width: 11rpx;
						margin-top: 2rpx;
					}

					.icn-red {
						border-top-color: #EE5953;
					}
				}
			}
		}
	}

	.optional-data-content {
		.optional-data-row {
			padding: 24rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;

			.data-left {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.data-name {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
				}

				.data-code {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.data-table {
						width: 24rpx;
						height: 24rpx;
						border-radius: 4rpx;
						background-color: #FFA200;
						color: #fff;
						font-size: 16rpx;
						text-align: center;
						line-height: 24rpx;
						margin-right: 8rpx;
					}

					text {
						font-size: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.4);
					}
				}
			}

			.data-chart {
				width: 357rpx;
				height: 120rpx;
			}

			.data-right {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.data-num {
					width: 132rpx;
					height: 56rpx;
					background: #FF3B30;
					border-radius: 8rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
				}

				.data-proportion {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FF3B30;
					margin-top: 6rpx;
				}
			}
		}
	}

	.hot-title {
		padding-bottom: 26rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		// margin-top:24rpx;
		.left {
			display: flex;
			align-items: center;

			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #000000;
				line-height: 46rpx;
			}

			& image {
				width: 46rpx;
				height: 46rpx;
			}
		}

		.check {
			display: flex;
			align-items: center;

			& image {
				width: 46rpx;
				height: 46rpx;
			}

			& text {
				font-size: 24rpx;
				color: #8E8E93;
			}
		}
	}

	.hot-title::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 60rpx;
		height: 10rpx;
		background: linear-gradient(90deg, #FF3B30 0%, rgba(255, 59, 48, 0) 100%);
	}

	.content {
		padding: 24rpx 20rpx;
	}

	.group-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 32rpx 24rpx 64rpx;

		.info-box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 8rpx;

			.col {
				width: 314rpx;
				height: 144rpx;
				border-radius: 12rpx;
				margin-top: 24rpx;
				margin-right: 34rpx;

				.sup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 8rpx 8rpx 0 24rpx;

					.checkRed-box {
						width: 64rpx;
						height: 64rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.checkRed {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							border: 2rpx solid #666;
						}
					}

					& text {
						font-size: 28rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
					}

					.exists {
						font-size: 20rpx;
						color: #666;
					}
				}

				.sub {
					font-size: 28rpx;
					font-weight: bold;
					color: #EE5953;
					padding: 8rpx 8rpx 24rpx 24rpx;

					// margin-top:8rpx;
					& text:last-child {
						padding-left: 22rpx;
					}
				}
			}

			.col:nth-child(2n) {
				margin-right: 0;
			}

			.green-gradientBg {
				background: linear-gradient(180deg, rgba(51, 196, 91, 0.04) 0%, rgba(51, 196, 91, 0.08) 100%);

				.sub {
					color: #33C45B;
				}
			}

			.red-gradientBg {
				background: linear-gradient(180deg, #FFFDFD 0%, #FDE6E5 100%);

				.sub {
					color: #EE5953;
				}
			}
		}

		.add-optional {
			width: 598rpx;
			height: 86rpx;
			background: #EE5953;
			border-radius: 44rpx;
			text-align: center;
			line-height: 86rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin: 32rpx auto 0;
		}

		.search-optional {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.search-icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
			}

			.ipt {
				font-size: 24rpx;
				color: #8E8E93;
			}
		}
	}

	.menu-fix1 {
		padding-top: 0;

		.menu-box {
			padding: 0 32rpx;
			border-bottom: 2rpx solid #F4F5F7;

			.tl:nth-child(1) {
				width: 30%;
			}

			.tl:nth-child(2) {
				width: 22%;
				justify-content: flex-end;
			}

			.tl:nth-child(3) {
				width: 28%;
				justify-content: flex-end;
			}

			.tl:nth-child(4) {
				width: 20%;
				justify-content: flex-end;
			}
		}
	}

	.table-box {
		background-color: #fff;

		.tr {
			padding: 24rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F4F5F7;

			.tl {
				font-size: 32rpx;
				font-weight: bold;
				color: #33C45B;

				.sup {
					font-size: 32rpx;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;
				}

				.sub {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.4);
				}
			}

			.tl:nth-child(1) {
				width: 30%;
			}

			.tl:nth-child(2) {
				width: 22%;
				text-align: right;
			}

			.tl:nth-child(3) {
				width: 28%;
				text-align: right;
			}

			.tl:nth-child(4) {
				width: 20%;
				text-align: right;
			}
		}
	}
</style>